<template>
  <div class="main-content loading-component" v-show="showLoading">
    <div class="mc-middle_title">
      <span>正在为您拼命推荐产品</span>
    </div>
    <img :src="rock" width="440" height="440"/>
    <canvas id="canvas" width="280" height="280"></canvas>
    <div class="lc-title" >
      <div class="inner-container" v-for="(item, index) in marqueeList">
        <span>{{item.name}}</span>
      </div>
    </div>
  </div>
</template>
<script>

  import rock from '@/assets/bussiness/rock.gif'

  export default {
    data() {
      return {
        rock,
        animate: false,
        marqueeList: [
          { name: '年化利率7%起' },
          { name: '实时授信' },
          { name: '最快当天放款' },
          { name: '最高额度200万' }
        ]
      }
    },
    props: ['showLoading', 'finishLoading'],
    mounted() {
      setInterval(this.showMarquee, 5000)
      this.drawLoadingByCanvas('canvas', !!this.finishLoading ? 100 : 90, 100);
    },
    methods: {
      showMarquee: function () {
        this.animate = true;
        setTimeout(()=>{
          this.marqueeList.push(this.marqueeList[0]);
          this.marqueeList.shift();
          this.animate = false;
        },5000)},
      drawLoadingByCanvas: function (id, progress, progress2) {
        //canvas进度条
        let canvas = document.getElementById(id),
          ctx = canvas.getContext("2d"),
          percent = progress,
          percent2 = progress2,
          //最终百分比
          circleX = canvas.width / 2, // 中心x坐标
          circleY = canvas.height / 2, //中心y坐标
          radius = 100, //圆环半径
          lineWidth = 18, // 圆形线条的宽度
          process = 0.0,
          process2 = 0.0;
        let circleLoading = window.setInterval(function () {
          loading();
        }, 100);
        //画圆
        function drawCircle(cx, cy, r, flag) {
          ctx.beginPath();
          ctx.lineWidth = flag?6:lineWidth;
          ctx.strokeStyle = '#F6F5F4';
          ctx.arc(cx, cy, r, 0, Math.PI * 2);
          ctx.stroke();
        }

        //画弧线
        function drawSector(cx, cy, r, startAngle, endAngle, anti) {
          ctx.beginPath();
          ctx.lineWidth = lineWidth;

          // 渐变色 - 可自定义
          let linGrad = ctx.createLinearGradient(
            circleX - radius - lineWidth, circleY, circleX + radius + lineWidth, circleY
          );


          linGrad.addColorStop(0.0, '#ff8e4a');
          linGrad.addColorStop(1.0, '#FFD900');
          ctx.strokeStyle = linGrad;
          //圆弧两端的样式
          ctx.lineCap = 'round';
          ctx.arc(cx, cy, r, startAngle, endAngle);
          ctx.stroke();
        }

        //刷新
        function loading() {
          let percent3 = progress;
          if (percent < percent2) percent = percent2;
          if (process >= percent) clearInterval(circleLoading);
          if (process2 >= percent) clearInterval(circleLoading);
          //清除canvas内容
          ctx.clearRect(0, 0, circleX * 2, circleY * 2);

          //外圆形
          drawCircle(circleX, circleY, radius);
          //内圆形
          drawCircle(circleX, circleY, 80, true);
          drawSector(circleX, circleY, radius, Math.PI * 4 / 2, Math.PI * 4 / 2 + 2 * Math.PI * process / 100);

          //控制结束时动画的速度
          if (process < percent3) {
            if (process / percent > 0.70) {
              process += 0.4;
            } else {
              process += 0.4;
            }
          }
        }
      }
    }
  }
</script>
<style lang="scss">
  .loading-component{
    margin: 8px auto 0 auto;
    text-align: center;
    position: relative;
    height: calc(100vh - 108px);
    #canvas {
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      position: absolute;
      left: 460px;
      top: 159px;
    }
    .lc-title{
      position: absolute;
      left: 546px;
      top: 289px;
      color: #666666;
      font-weight: bold;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      .inner-container{
        display: block;
        position: relative;
        top: 0;
        left: 0;
      }
    }
    .marquee_box {
      display: block;
      position: relative;
      width: 60%;
      height: 30px;
      overflow: hidden;
    }
    .marquee_top {
      transition: all 0s;
      margin-top: 30px
    }
  }
</style>
